﻿<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="直播间" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-top-10">
            <u-subsection :list="items" :current="current" :animation="true" @change="onClickItem" active-color="#ff9900"></u-subsection>
        </view>
        <view class="coreshop-padding-left-5 coreshop-padding-right-5 coreshop-padding-top-5">
            <view class="coreshop-margin-top-10" v-if="list.length > 0">
                <view class="coreshop-bg-white coreshop-border-radius-9 coreshop-margin-10" v-for="item in list" :key="item.roomid" @click="goRoom(item.roomid)">
                    <view class="coreshop-flex coreshop-position-relative coreshop-border-radius-9">
                        <view style="border-top-right-radius: 10px; border-top-left-radius: 10px ">
                            <u--image :src="item.share_img" mode="widthFix" width="698rpx" height="250px"></u--image>
                        </view>
                        <view class="coreshop-position-absolute" v-if="item.live_status==101">
                            <u-tag text="直播中" size="mini" type="success"></u-tag>
                        </view>
                        <view class="coreshop-position-absolute" v-if="item.live_status==102">
                            <u-tag text="未开始" size="mini"></u-tag>
                        </view>
                        <view class="coreshop-position-absolute" v-if="item.live_status==103">
                            <u-tag text="已结束" size="mini" type="warning"></u-tag>
                        </view>
                        <view class="coreshop-position-absolute" v-if="item.live_status==104">
                            <u-tag text="禁播" size="mini" type="warning"></u-tag>
                        </view>
                        <view class="coreshop-position-absolute" v-if="item.live_status==105">
                            <u-tag text="暂停" size="mini" type="error"></u-tag>
                        </view>
                        <view class="coreshop-position-absolute" v-if="item.live_status==106">
                            <u-tag text="异常" size="mini" type="error"></u-tag>
                        </view>
                        <view class="coreshop-position-absolute" v-if="item.live_status==107">
                            <u-tag text="已过期" size="mini" type="error"></u-tag>
                        </view>
                        <view class="coreshop-position-absolute  coreshop-padding-8" style="bottom: 0rpx;">
                            <view class="coreshop-font-14 coreshop-text-white">{{ item.name }}</view>
                        </view>
                    </view>

                    <view class="coreshop-flex coreshop-flex-wrap coreshop-justify-start coreshop-font-sm coreshop-flex-direction-row coreshop-align-center  coreshop-padding-top-10 coreshop-padding-left-8 coreshop-padding-right-8  coreshop-padding-bottom-5">
                        <view class="coreshop-font-14 coreshop-text-black">
                            主播：
                        </view>
                        <view class="coreshop-font-14 coreshop-text-black">{{ item.anchor_name }}</view>
                        <view class="coreshop-font-12 coreshop-text-black coreshop-padding-left-4 coreshop-padding-right-4 "> | </view>
                        <view class="coreshop-font-12 coreshop-text-black">直播商品：{{ item.goods.length }}件</view>
                    </view>
                    <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-font-12 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-padding-bottom-8 coreshop-text-grey">
                        直播时间:{{$u.timeFormat(item.start_time, 'yyyy-mm-dd hh:MM:ss')}} 至 {{$u.timeFormat(item.end_time, 'yyyy-mm-dd hh:MM:ss')}}
                    </view>
                </view>
                <view>
                    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="0" margin-bottom="20" class="coreshop-padding-top-10" />
                </view>
            </view>
            <!-- 无数据时默认显示 -->
            <view class="coreshop-emptybox" v-else>
                <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="当前列表为空" mode="list"></u-empty>
            </view>
        </view>
        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                items: ['直播计划', '历史直播'],
                current: 0,
                page: 1,
                limit: 50,
                list: [],
                status: 'loadmore',
                iconType: 'flower',
                loadText: {
                    loadmore: '轻轻上拉',
                    loading: '努力加载中',
                    nomore: '实在没有了'
                },
            };
        },
        onLoad() {
            this.getList();
            console.log(this.userInfo);
        },
        onReachBottom() {
            if (this.status === 'loadmore') {
                this.getList();
            }
        },
        computed: {
            ...mapState({
                hasLogin: state => state.hasLogin,
                userInfo: state => state.userInfo,
            }),
            hasLogin: {
                get() {
                    return this.$store.state.hasLogin;
                },
                set(val) {
                    this.$store.commit('hasLogin', val);
                }
            },
            userInfo: {
                get() {
                    return this.$store.state.userInfo;
                },
                set(val) {
                    this.$store.commit('userInfo', val);
                }
            },
        },
        methods: {
            // tab点击切换
            onClickItem(index) {
                if (this.current !== index) {
                    this.current = index;
                    this.page = 1;
                    this.list = [];
                    this.getList();
                }
            },
            getList() {
                let data = {
                    page: this.page,
                    limit: this.limit,
                };
                if (this.current == 0) {
                    data['where'] = '';
                }
                if (this.current == 1) {
                    data['where'] = 'get_replay';
                }
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                this.status = 'loading';
                this.$u.api.getLiveInfo(data).then(res => {
                    if (res.status) {
                        const _list = res.data.room_info;
                        this.list = [...this.list, ..._list];
                        if (res.data.total > this.list.length) {
                            this.status = 'loadmore';
                            this.page++;
                            uni.hideLoading();
                        } else {
                            // 数据已加载完毕
                            this.status = 'nomore';
                            uni.hideLoading();
                        }
                    } else {
                        // 接口请求出错了
                        uni.hideLoading();
                        this.$u.toast(res.msg);
                    }
                });
            },
            goRoom(roomid) {
                console.log(roomid);
                if (!this.hasLogin) {
                    uni.hideLoading();
                    this.$store.commit('showLoginTip', true);
                    return false;
                } else {
                    let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/livebroadcast/index/index', userId: this.userInfo.id })) // 开发者在直播间页面路径上携带自定义参数（如示例中的 path 和pid参数）
                    console.log(customParams);
                    wx.navigateTo({
                        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomid}&custom_params=${customParams}`
                    });

                }
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>
